<template>
  <div class="information">
    <h3>资讯管理</h3>
    <div class="informationInner">
      <div class="fromInput">
        <p>
          搜索：
          <input type="text" v-model="searchValue" placeholder="资讯名称" @keyup.enter="search" />
        </p>
        <p>
          选择:
          <el-select v-model="value" placeholder="请选择状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </p>
        <el-button type="primary" @click="searchState">查询</el-button>
        <el-button type="primary" @click="addNew">新增</el-button>
      </div>

      <div class="order-main">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="序号" type="index" width="200"></el-table-column>

          <el-table-column label="文章标题" width="230">
            <template slot-scope="scope">
              <span>{{ scope.row.title }}</span>
            </template>
          </el-table-column>

          <el-table-column label="创建人" width="230">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>

          <el-table-column label="创建日期" width="230">
            <template slot-scope="scope">
              <span>{{ scope.row.time }}</span>
            </template>
          </el-table-column>

          <el-table-column label="状态" width="180">
            <template slot-scope="scope">
              <el-switch
                v-if="scope.row.state === '开启'"
                :value="true"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
              <el-switch v-else :value="false" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="rentChange(scope.row)">编辑</el-button>
              <el-button @click="handleDelete(scope.$index, scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 30]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>

        <div class="mask" v-show="maskShow">
          <div class="maskInner" v-if="changeWho">
            <h3>新增数据</h3>
            <el-form
              :model="ruleForm"
              status-icon
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="文章标题" prop="pass">
                <el-input type="input" v-model="ruleForm.title" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="创建人" prop="checkPass">
                <el-input type="input" v-model="ruleForm.name" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="创建日期" prop="checkPass">
                <el-input type="input" v-model="ruleForm.time" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="状态" prop="checkPass">
                <el-input type="input" v-model="ruleForm.state" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="quxiao">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="maskInner" v-else>
            <h3>编辑数据</h3>
            <el-form
              :model="ruleForm"
              status-icon
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="文章标题" prop="pass">
                <el-input type="input" v-model="ruleForm.title" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="创建人" prop="checkPass">
                <el-input type="input" v-model="ruleForm.name" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="创建日期" prop="checkPass">
                <el-input type="input" v-model="ruleForm.time" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="状态" prop="checkPass">
                <el-input type="input" v-model="ruleForm.state" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitaaa">提交</el-button>
                <el-button @click="reset">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageIndex: 1,
      pageSize: 5,
      searchValue: "",
      value: "",
      currentPage4: 1,
      total: null,
      maskShow: false,
      changeWho: false,
      roid:null,
      ruleForm: {
        title: "",
        name: "",
        time: "",
        state: ""
      },
      options: [
        {
          value: "请选择",
          label: "请选择"
        },
        {
          value: "开启",
          label: "开启"
        },
        {
          value: "关闭",
          label: "关闭"
        }
      ]
    };
  },

  methods: {
    //获取数据
    async getAddress(pageIndex, pageSize) {
      let res = await this.$http.get(
        `/api/getInfore?pageIndex=${pageIndex}&pageSize=${pageSize}`
      );
      console.log(res);
      this.tableData = res.data.data;
    },

    //开关
    onChange($event, num) {
      console.log($event);
      console.log(num);
    },
    //查询
    searchState() {
      this.$http
        .post("/api/selectInfore", {
          state: this.value
        })
        .then(res => {
          if (res.data.code === 1) {
            this.tableData = res.data.data;
            this.$message.success(res.data.message);
          }
        });
    },
    //搜索
    search() {
      this.$http
        .post("/api/searchInfore", {
          title: this.searchValue
        })
        .then(res => {
          if (res.data.code === 1) {
            this.tableData = res.data.data;
            this.$message.success(res.data.message);
          }
        });
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAddress(this.pageIndex, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getAddress(this.pageIndex, this.pageSize);
    },
    //删除
    handleDelete(index, row) {
      this.$http
        .post("/api/deleteInfore", {
          id: row.id
        })
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.message);
            this.getAddress(this.pageIndex, this.pageSize);
          }
        });
    },
    //提交编辑
    submitaaa() {
      this.maskShow = false;
      console.log(this.ruleForm);
      this.$http
        .post("/api/changeInfore",{
          id:this.roid,
          title:this.ruleForm.title,
          name:this.ruleForm.name,
          time:this.ruleForm.time,
          state:this.ruleForm.state
        })
        .then(res => {
          console.log(res);
          if (res.data.code === 1) {
            this.$message.success(res.data.message);
            this.getAddress(this.pageIndex,this.pageSize);
            this.ruleForm = {
              title: "",
              name: "",
              time: "",
              state: ""
            };
          }
        });
    },
    //编辑
    rentChange(row) {
      console.log(row);
      this.roid = row.id;
      this.maskShow = true;
      this.changeWho = false;

      this.ruleForm = {
        title:row.title,
        name:row.name,
        time:row.time,
        state:row.state
      };
    },
    //取消编辑
    reset() {
      this.maskShow = false;
      console.log(1);
      this.ruleForm = {
        title: "",
        name: "",
        time: "",
        state: ""
      };
    },
    //新增
    addNew() {
      this.maskShow = true;
      this.changeWho = true;
    },
    //提交新增
    submitForm() {
      this.maskShow = false;
      console.log(this.ruleForm);
      this.$http
        .post("/api/addInfore", {
          title: this.ruleForm.title,
          name: this.ruleForm.name,
          time: this.ruleForm.time,
          state: this.ruleForm.state
        })
        .then(res => {
          console.log(res);
          if (res.data.code === 1) {
            this.$message.success(res.data.message);
            this.getAddress(1);
            this.ruleForm = {
              title: "",
              name: "",
              time: "",
              state: ""
            };
          }
        });
    },
    //取消新增
    quxiao() {
      this.maskShow = false;
    }
  },
  created() {
    this.getAddress(this.pageIndex, this.pageSize);
  }
};
</script>

<style scoped lang='scss'>
.information {
  width: 100%;
  height: 100%;
  .informationInner {
    width: 100%;
    height: 500px;
    padding: 5px;
    .fromInput {
      width: 100%;
      height: 100px;
      background: white;
      p {
        padding-left: 10px;
        input {
          width: 250px;
          height: 35px;
          text-indent: 10px;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
.fromInput {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  .maskInner {
    width: 700px;
    height: 500px;
    background: white;
    text-align: center;
  }
}
.el-form-item__content .el-input {
  width: 550px;
}
.el-form-item__content button {
  margin: 5px 45px;
  width: 180px;
}

.maskInner h3 {
  height: 60px;
  line-height: 60px;
  font-size: 25px;
}
.information .cell{
  text-align: center;
}
</style>
